<!-- 创建时间: 2020年12月27日 星期天 13:09 -->
<template>
    <div class='startExamination_container' ref="startExamination_container">
        <div class="myAnmation animation_flash"></div>
        <div class="questionsList" v-for="(item, i) in questionsList" :key="i">
            <span v-if="item.type=='radio'"><b>【{{'选择题-'+(i+1)}}】</b></span>
            <span v-if="item.type=='checkbox'"><b>【{{'多选题-'+(i+1)}}】</b></span>
            <p></p>
            {{item.questionName}} （ {{item.score}}分 ）
            <p></p>
            <div v-if="item.type=='radio'">
                <div v-for="(ite, j) in item.optionList" :key="j">
                    <el-radio v-model="item.rightOption" :label="ite">{{ite}}</el-radio>
                </div>
            </div>
            <div v-if="item.type=='checkbox'">
                <el-checkbox-group v-model="item.rightOption">
                    <div v-for="(ite, j) in item.optionList" :key="j">
                        <el-checkbox :label="ite">{{ite}}</el-checkbox>
                    </div>
                </el-checkbox-group>
            </div>
            <p></p>
        </div>
        <el-row>
            <el-col style="text-align:right; padding:0px 10px;">
                <el-button type="primary" style="padding: 12px 35px;" round @click="submit">交卷</el-button>
            </el-col>
        </el-row>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        //这里存放数据
        return {
            questionsList: [], // 下载到时前端的考试试题信息
        }
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        autoGetExaminationQuestions() {
            let classNumber = this.$store.getters.getUserNumber.substring(0, 7);
            this.$http.post("autoGetExaminationQuestions", { classNumber: classNumber, questionBank: this.$store.getters.getStartExaminationNumber }).then(res => {
                let data = JSON.parse(res.bodyText);
                for (let i = 0; i < data.length; i++) {
                    data[i].optionList = data[i].optionList.split("&");
                    data[i].rightOption = [];
                }
                this.questionsList = data;
            });
            let dt = setInterval(() => {
                let effectiveTime = (new Date(this.$store.getters.getEndTime).getTime() - new Date().getTime()) / 1000 / 60;
                effectiveTime = Math.round(effectiveTime);
                if (effectiveTime <= 0) { clearInterval(dt) };
                let showMessage = Math.round((new Date(this.$store.getters.getEndTime).getTime() - new Date().getTime()) / 1000);
                if (showMessage == 600) {
                    this.$message({
                        message: '距离考试结束还有' + effectiveTime + "分钟",
                        type: 'warning'
                    });
                } else if (showMessage == 180) {
                    this.$message({
                        message: '距离考试结束还有' + effectiveTime + "分钟",
                        type: 'error'
                    });
                }
                this.$store.commit("setEffectiveTime", effectiveTime);
            }, 1000);
        },
        submit() {
            let questionsList = this.questionsList;
            let rightOption = [];
            for (let i = 0; i < questionsList.length; i++) {
                let arr = new Array();
                arr.push(questionsList[i].id);
                if (questionsList[i].type == 'radio') {
                    arr.push(questionsList[i].rightOption);
                } else {
                    arr.push(questionsList[i].rightOption.join(",").replace(/,/g, "&"));
                }
                rightOption.push(arr);
            }

            let obj = {
                classNumber: this.$store.getters.getUserNumber.substring(0, 7),
                studentNumber: this.$store.getters.getUserNumber,
                questionBank: this.$store.getters.getStartExaminationNumber,
                rightOption: rightOption,
            }

            this.$http.post("submitExaminationInfo", { data: JSON.stringify(obj) }).then(res => {
                if (res.body) {
                    this.$message.success('恭喜你，完成本次' + this.$route.query.coursesName + '课程考试');
                    this.$router.push("/student/myExamination");
                } else {
                    this.$message.error('你已超时，本次' + this.$route.query.coursesName + '课程考试已结束');
                }
            })
        }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
        this.autoGetExaminationQuestions();
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        console.log(this.$refs.startExamination_container);
        this.$refs.startExamination_container.addEventListener(
            "mouseleave",
            function(e) {
                console.log(e);
            }
        );
    },
    //当data中定义的数据有变化时就会加载updated方法
    updated() {},
}
</script>

<style lang='scss' scoped>
//@import url(); 引入公共css类
.startExamination_container {
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    .questionsList,
    .info {
        padding-left: 10px;
    }
}
.myAnmation {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    border: 10px solid red;
    background: transparent;
}
.animation_flash {
    animation: div 1.5s linear;
    -webkit-animation: div 1.5s linear;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes div {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes div {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
</style>